<template>
  <div class="padding-top-20">
    <div class="dig-top">
      <div class="dig-top-title">{{title}}<span class="time">{{deadlineTitle}}</span> <span class="dig">{{type=='payment'?'单位：万元':'单位：万m²'}}</span></div>
    </div>
    <div class="table-box" v-if="dataInfo.length>0">
      <div class="table-item" v-for="(item,index) in dataInfo" :key="index">
        <div class="table-title" :class="index > 0 ? 'cursor-pointer' : ''" @click="goOperationIndex(item.projectKey)">
          <span>{{item.projectName}}</span>
          <span v-if="item.projectName" class="icon el-icon-arrow-right"></span>
        </div>
        <div v-if="index==0 && type=='payment'">
          <div class="name-first">账单收缴率</div>
          <div class="name-item">欠费金额</div>
          <div class="name-last">90天以上</div>
          <div class="name-item">30-90天</div>
          <div class="name-last">30天以内</div>
        </div>
        <div v-if="index==0 && type=='carpetArea'">
          <div class="name-first">地毯面积</div>
          <div class="name-item">在租地毯面积</div>
          <div class="name-last">使用系数</div>
          <div class="name-item">空间资产出租率</div>
        </div>
        <div v-if="index>0&& type=='payment'">
          <div class="name-first">{{item.collectionRate | accMul}}%</div>
          <div class="name-item">{{item.arrearageAmount | moneyFilterNoUnit}}</div>
          <div class="name-last">{{item.geArrearageAmount | moneyFilterNoUnit}}</div>
          <div class="name-item">{{item.betweenArrearageAmount | moneyFilterNoUnit}}</div>
          <div class="name-last">{{item.leArrearageAmount | moneyFilterNoUnit}}</div>
        </div>
        <div v-if="index>0&& type=='carpetArea'">
          <div class="name-first">{{item.carpetArea | areaFilter}}</div>
          <div class="name-item">{{item.rentedCarpetArea | areaFilter}}</div>
          <div class="name-last">{{item.usageRate | accMul}}%</div>
          <div class="name-item">{{item.rentRate | accMul}}%</div>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import { performanceOperationDetail,operationCondition } from '../api/index';
  import { goOperationIndex } from '@/common/js/utils';

  export default {
    props:{
      selectTime: {
        type: String,
        default: dayjs(new Date(new Date().getTime() - 24*30*60*60*1000)).format('YYYY-MM'),
      },
      title:{
        type: String,
        default: '',
      },
      type:{
        type: String,
        default: '',
      },
    },
    watch:{
      type:{
        deep:true,
        immediate:true,
        handler(val){
          if(val){
            if(val == 'carpetArea'){
              this.getCarpetArea()
            }else{
              this.getDetail()
            }
          }
        }
      }
    },
    data() {
      return {
        dataInfo:[],
        deadlineTitle:'',
        goOperationIndex:goOperationIndex
      };
    },
    created(){
    },
    methods: {
      async getCarpetArea(){
        this.dataInfo=[]
        let res = await operationCondition({
          month: new Date(this.selectTime).getMonth()+1,
          year:new Date(this.selectTime).getFullYear(),
        });
        if(res.list&&res.list.length>0){
          res.list.unshift({
            projectName:'',
          })
        }
        this.dataInfo = res.list
        this.deadlineTitle ='截止到'+dayjs(res.date).format('MM月DD日')
      },
      async getDetail() {
        this.dataInfo=[]
        let res = await performanceOperationDetail({
          month: new Date(this.selectTime).getMonth()+1,
          year:new Date(this.selectTime).getFullYear(),
        });
        if(res.list&&res.list.length>0){
          res.list.unshift({
            projectName:'',
          })
        }
        this.deadlineTitle ='截止到'+dayjs(res.date).format('MM月DD日')
        this.dataInfo = res.list;
      },
    },
    components: {
      
    },
  };
</script>
<style lang="less" scoped>
   .item{
     width: 200px;
     text-align: left;
   }
   .dig-top{
     position: absolute;
     height: 50px;
     top:5px;
     left: 0;
     width: 80%;
     .dig-top-title{
       color: #333;
       font-size: 18px;
       height: 50px;
       line-height: 50px;
       padding-left: 30px;
     }
     .time{
       color: #999;
       font-size: 14px;
       height: 50px;
       line-height: 50px;
       padding-right: 20px;
       padding-left: 10px;
     }
     .dig{
       color: #333;
       font-size: 14px;
       height: 50px;
       line-height: 50px;
     }
   }
   .dig-line{
     border-bottom: 1px solid #f0f0f0;
     margin:0 -20px;
   }
   .table-box{
     display: flex;
     justify-content: flex-start;
     .table-item:first-child{
       width:300px;
     }
     .table-item{
       width:100%;
        .table-title{
          color: #333;
          font-size: 14px;
          font-weight: 500;
          background: #f2f2f2;
          height: 40px;
          line-height: 40px;
          flex: 1;
          text-align: center;
          border-left: 1px solid #fff;
          box-sizing: border-box;
        }
        .name-item{
          height: 40px;
          line-height: 40px;
          border-left: 1px solid #fff;
          box-sizing: border-box;
          display: flex;
          justify-content: start;
          padding-left: 15px;
        }
        .name-first{
          color:#333;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-left: 1px solid #fff;
          box-sizing: border-box;
          display: flex;
          justify-content: start;
          padding-left: 15px;
        }
        .name-item-second{
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-left: 1px solid #fff;
          box-sizing: border-box;
          padding-left: 80px;
        }
        .name-last{
          height: 40px;
          line-height: 40px;
          border-left: 1px solid #fff;
          box-sizing: border-box;
          display: flex;
          justify-content: start;
          padding-left: 15px;
        }
        .blue{
          color: #29C37F;
          padding-left: 10px;
        }
        .red{
          color: #EB5757;
          padding-left: 10px;
        }
     }
   }
</style>
